<template>
  <div class="top_bar">
    <div class="logo"><img src="https://bu.dusays.com/2024/09/28/66f7782a0e175.png" alt=""></div>
    <div class="search">
      <el-input v-model="search_item_input" placeholder="热门商品" :prefix-icon="Search" />
      <div class="search_btn">
        <v-btn class="search_btn_v" :ripple="false" height="5vh" min-width="12vh">
          <v-avatar size="40" image="https://bu.dusays.com/2024/10/31/67231ef608442.png"></v-avatar>
        </v-btn>
      </div>
    </div>
  </div>
  <div class="body">
    <div class="order_box">
      <div class="cart_box">
        <div class="cart_head" style="display: flex;">
          <el-icon class="back" @click="router.push('/user')"
            style="position: relative;margin-left: -15vh ;margin-top: 2vh;" size="35" color="green">
            <Back />
          </el-icon>
          <h2 style="color: green;font-weight: normal;margin: auto;">我的订单</h2>
        </div>
      </div>
      <div class="card_body">
        <div class="order_all">
          <span>所有订单</span>
        </div>
        <div class="search_order">
          <el-input v-model="search_input" style="width: 400px" placeholder="请输入商品名称或订单号" :prefix-icon="Search" />
          <el-button type="success" plain @click="searchOrders">订单查找</el-button>
        </div>
        <div class="order_card">
          <el-select v-model="selectedStatus" placeholder="选择订单状态" style="width: 200px; margin-left: 10px;">
            <el-option label="所有订单" value=""></el-option>
            <el-option label="待支付" value="待支付"></el-option>
            <el-option label="待发货" value="待发货"></el-option>
            <el-option label="已发货" value="已发货"></el-option>
            <el-option label="已收货" value="已收货"></el-option>
          </el-select>

          <div class="top_info"
            style="padding: 1vh;color:rgb(26, 152, 26);background-color: rgb(239, 255, 215);display: flex;align-items: center;justify-content: space-around;">
            <span style="width: 30%;">商品</span>
            <span>单价</span>
            <span>数量</span>
            <span>实付款</span>
            <span>交易状态</span>
            <span>交易操作</span>
          </div>
          <div class="card_body" v-for="card in filteredOrders" :key="card.order.trackingNumber" style="margin-bottom: 2vh;">
            <div class="card_head"
              style="border-radius: 5px 5px 0 0;padding: 1vh;display: flex;align-items: center;justify-content: space-between;background-color: rgb(40, 155, 22);">
              <span>下单时间：{{ card.order.createdAt }}</span>
              <span>订单号：{{ card.order.trackingNumber }}</span>
            </div>
            <div class="card_down"
              style="height: 16vh;background-color: white;display: flex;border:rgb(40, 155, 22) 2px solid ;">
              <el-avatar @click="jumpDetail(card.items.itemID)" style="margin: auto;margin-left:1vh ;" shape="square"
                :size="120"
                :src="`https://zizi-1325809325.cos.ap-guangzhou.myqcloud.com/商品列表/List/${card.items.itemImg}.jpg`" />
              <div class="product_info" style="margin: auto;display: flex;flex-direction: column;">
                <span
                  style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;width: 15vh;">{{ card.items.itemName }}</span>
                <span>商品规格:颜色尺码</span>
              </div>
              <span style="margin: auto;margin-left: 13vh;">￥{{ card.items.itemPrice }}</span>
              <span style="margin: auto;">{{ card.order.quantity }}</span>
              <span style="margin: auto;">￥{{ card.order.totalAmount }}</span>
              <span style="margin: auto;">{{ card.order.orderStatus }}</span>
              <div style="margin: auto;">
                <el-button v-if="card.order.orderStatus == '待支付'" type="danger" plain>付款</el-button>
                <el-button v-else-if="card.order.orderStatus == '待发货'" type="warning" plain>催单</el-button>
                <el-button v-else-if="card.order.orderStatus == '已发货'" type="primary" plain>查看物流</el-button>
                <el-button v-else-if="card.order.orderStatus == '已收货'" type="success" plain>评价</el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { Calendar, Search } from '@element-plus/icons-vue'
import { onMounted, reactive } from "vue";
import { ref } from 'vue'
import request from '../../utils/request';
import router from '../../router/index.js'
import { ElLoading } from 'element-plus'
import {computed} from 'vue'
import {debounce} from 'lodash'

const search_item_input = ref('')
const search_input=ref('')

const order_list = ref([])

const selectedStatus=ref('')

// const filteredOrders=computed(()=>{
//   if(!selectedStatus.value){
//     return order_list.value;
//   }
//   return order_list.value.filter(order=>order.order.orderStatus===selectedStatus.value)
// })

const filteredOrders = computed(() => {
  let filtered = order_list.value;

  if (search_input.value) {
    filtered = filtered.filter(order => {
      const orderStr = JSON.stringify(order.order).toLowerCase();
      return orderStr.includes(search_input.value.toLowerCase());
    });
  }

  if (selectedStatus.value) {
    filtered = filtered.filter(order => order.order.orderStatus === selectedStatus.value);
  }

  return filtered;
});

const jumpDetail = (itemId) => {
  router.push(`/desc/${itemId}`).then(() => {
    window.scrollTo(0, 0);
  });
};

// 防抖函数来控制请求频率
const searchOrders = debounce(() => {
  const uid = sessionStorage.getItem('uid');
  const uidObj = JSON.parse(uid);
  const loading = ElLoading.service({
    lock: true,
    text: '正在搜索您的订单...',
    background: 'rgba(0,0,0,0.7)'
  });

  request.get(`/api/user/selectOrder/${uidObj}`).then(res => {
    order_list.value = res.data;
    loading.close();
  }).catch(error => {
    console.error(error);
    loading.close();
  });
}, 500); // 延时500ms发起请求

// 监听搜索框输入
const handleSearch = () => {
  searchOrders();
};

onMounted(() => {

  searchOrders(); // 初始化加载订单数据
})
</script>

<style scoped>
.top_bar {
  width: 100%;
  height: 10vh;
  /* background-color: wheat; */
  display: flex;
}

.top_bar img {
  width: 20vh;
  height: auto;
  margin-left: 15vh;
}

.top_bar .search {
  width: 100vh;
  margin: auto;
  margin-left: 10vh;
  display: flex;
}

.search_btn {
  display: flex;
}

.search .search_btn .search_btn_v {
  margin-left: 2vh;
  background-color: green;
  font-size: 2vh;
  font-weight: bold;
  border-radius: 20px;
}

.body {
  width: 100%;
  background-color: #f5f5f5;
}


.order_box {
  margin: auto;
  background-color: white;
  width: 80%;
  height: 100vh;
}

.cart_box {
  width: 80%;
  background-color: white;
  margin: auto;
}

.back {
  transition: transform 0.3s ease;
}

.back:hover {
  transform: scale(1.1);
}

.order_all {
  font-size: 2.2vh;
  color: green;
  margin-left: 2vh;
  display: inline-block;
  /* 使span元素表现为块级元素，以便可以应用下划线 */
  border-bottom: 2px solid green;
  /* 添加绿色下划线 */
}

.order_card {
  width: 98%;
  height: 100vh;
  margin: auto;
  margin-top: 2vh;
}

.search_order {
  width: 98%;
  margin: auto;
  margin-top: 2vh;
}
</style>

